
<section class="physical">
    <!-- 大盒子 -->
    <div class="classification-box">
        <div class="smil-box clearfix">
            <h2>分类</h2>
            <ul> 
              <li v-for="item in typearr" @click="addtag(1,item)">{{item}}</li>
            </ul>
        </div>
        <div class="smil-box clearfix">
          <h2>用途级别</h2>
          <ul>
            <li v-for="item in purposearr" @click="addtag(2,item)">{{item}}</li>
          </ul>
        </div>
        <div class="smil-box clearfix">
          <h2>加工级别</h2>
          <ul>
            <li v-for="item in jiagongarr" @click="addtag(3,item)">{{item}}</li>
          </ul>
        </div>
        <div class="smil-box clearfix">
          <h2>特性级别</h2>
          <ul>
            <li v-for="item in newarr" @click="addtag(4,item)">{{item}}</li>
          </ul>
          <div v-show="newarr.length < 6" class="more-box" @click="showmore">
            <el-button >更多
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
          </div>
          <div v-show="newarr.length > 6" class="more-box" @click="hidemore">
            <el-button>收起
              <i class="el-icon-arrow-up el-icon--right"></i>
            </el-button>
          </div>
        </div>
        <div class="smil-box clearfix">
          <h2>筛选条件</h2>
            <div class="res-box">
                <h3>筛选结果</h3>
                <span v-show="data.typearr != '' || data.purposearr != '' || data.jiagongarr != '' || data.texingarr != ''">&gt;</span>
                <ul>
                  <li @click="remove(1)" v-show="data.typearr != ''">
                    <el-tag closable>{{data.typearr}}</el-tag>
                  </li>
                  <li @click="remove(2)"  v-show="data.purposearr != ''">
                    <el-tag closable>{{data.purposearr}}</el-tag>
                  </li>
                  <li @click="remove(3)" v-show="data.jiagongarr != ''">
                    <el-tag closable>{{data.jiagongarr}}</el-tag>
                  </li>
                  <li @click="remove(4)" v-show="data.texingarr != ''">
                    <el-tag closable>{{data.texingarr}}</el-tag>
                  </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 筛选菜单 -->
    <div class="menu-box">
      <el-row>
        <el-col :span="7">
          <div class="mykey clearfix">
            <span>关键字</span>
            <el-input placeholder="输入牌号关键字搜索" class="input-box"></el-input>
          </div>
          <div class="rongzhi">
            <span>溶质（g/10min）</span>
            <el-input  placeholder="" class="smil-input"></el-input>
            <div class="ling-box">-</div>
            <el-input placeholder="" class="smil-input"></el-input>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="mykey rongzhi clearfix">
            <span>溶质（g/10min）</span>
            <el-input placeholder="" class="smil-input"></el-input>
            <div class="ling-box">-</div>
            <el-input placeholder="" class="smil-input"></el-input>
          </div>
          <div class="rongzhi">
            <span>冲击强度</span>
            <el-input placeholder="" class="smil-input"></el-input>
            <div class="ling-box">-</div>
            <el-input placeholder="" class="smil-input"></el-input>
          </div>
        </el-col>
        <el-col :span="7">
         
            <div class="mykey rongzhi clearfix">
              <span>溶质（g/10min）</span>
              <el-input placeholder="" class="smil-input"></el-input>
              <div class="ling-box">-</div>
              <el-input placeholder="" class="smil-input"></el-input>
            </div>
            <div class="group-box">
                <el-button type="">清空</el-button>
            <router-link to="physicaldetails"><el-button type="primary">搜索</el-button></router-link>
            </div>
           
        </el-col>
        <el-col :span="3">
          <div class="right-box">
              <h6><b>1</b>/40</h6>
              <el-button-group>
                <el-button  icon="el-icon-arrow-left"></el-button>
                <el-button>
                  <i class="el-icon-arrow-right el-icon--right"></i>
                </el-button>
              </el-button-group>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-table :data="getProList" style="width: 100%">
        <el-table-column prop="name" label="名称">
          <template slot-scope="scope">
            <router-link to="Propertydetails">{{scope.row.name}}</router-link>
          </template>
        </el-table-column>
        <el-table-column prop="featurelevel" label="特别级别">
        </el-table-column>
        <el-table-column prop="uselevel" label="用途级别">
        </el-table-column>
      </el-table>
    </div>

  <!-- 分页 -->
  <div class="page-box">
    <el-pagination background :page-size="100" layout="prev, pager, next, jumper" :total="1000" prev-text="上一页" next-text="下一页"
      class="mypage">
    </el-pagination>
  </div>
</section>

